<template>
  <div class="operator-add-or-update">
    <el-dialog
      v-model="visible"
      width="35%"
      :title='title'
      @close="cancel">
      <el-form :model="dataForm" class="description" label-width="150px" style="padding: 0 10% 20px 5%">
        <el-form-item v-if="dataForm.developerType === 1" :label="$t('developer.name') + ':'">
          <label type="text">{{ dataForm.contactName }}</label>
        </el-form-item>
        <el-form-item v-if="dataForm.developerType === 2" :label="$t('developer.company_name') + ':'">
          <label type="text">{{ dataForm.firstName }}</label>
        </el-form-item>
        <el-form-item :label="$t('developer.developerType') + ':'">
          <label type="text">{{ dataForm.developerType === 1 ? $t('developer.developer_type_list.personal') : $t('developer.developer_type_list.company') }}</label>
        </el-form-item>
        <el-form-item :label="$t('developer.pidType') + ':'" prop="shortName" v-show="dataForm.developerType === 1">
          <label type="text">{{ dataForm.pidType === 1 ? $t('developer.id_card') : dataForm.pidType === 2 ? $t('developer.passport') : $t('developer.unknown') }}</label>
        </el-form-item>
        <el-form-item :label="$t('developer.pidNo') + ':'">
          <label type="text">{{ dataForm.pidNo }}</label>
        </el-form-item>
        <el-form-item v-if="dataForm.developerType === 2" :label="$t('developer.contactName') + ':'">
          <label type="text">{{ dataForm.contactName }}</label>
        </el-form-item>
        <el-form-item :label="$t('developer.mobile') + ':'">
          <label type="text">{{ dataForm.mobile }}</label>
        </el-form-item>
        <el-form-item :label="$t('developer.email') + ':'">
          <label type="text">{{ dataForm.email }}</label>
        </el-form-item>
        <el-form-item :label="$t('developer.countryCode') + ':'">
          <label type="text">{{ formatCountry(dataForm.countryCode) }}</label>
        </el-form-item>
        <el-form-item :label="$t('developer.address') + ':'">
          <label type="text">{{ dataForm.address }}</label>
        </el-form-item>
        <el-form-item :label="$t('developer.status') + ' :'">
          <el-tag v-if="dataForm.status === 2" size="small" type="warning">{{ statusFilter(dataForm.status) }}</el-tag>
          <el-tag v-if="dataForm.status === 1" size="small" type="success">{{ statusFilter(dataForm.status) }}</el-tag>
          <el-tag v-if="dataForm.status === 5 || dataForm.status === 7" size="small" type="info">{{ statusFilter(dataForm.status) }}</el-tag>
          <el-tag v-if="dataForm.status === 0 || dataForm.status === 3 || dataForm.status === 8" size="small" type="danger">{{ statusFilter(dataForm.status) }}</el-tag>
        </el-form-item>
        <el-form-item :label="$t('developer.remark') + ':'" v-show="dataForm.status !== 2 || examineFlag">
          <label type="text">{{ dataForm.remark }}</label>
        </el-form-item>
        <el-form-item :label="$t('developer.creTime') + ':'">
          <label>{{ formatDate(dataForm.creTime, 'YYYY-MM-DD HH:mm:ss') }}</label>
        </el-form-item>
        <el-form-item :label="$t('developer.updTime') + ':'">
          <label>{{ formatDate(dataForm.updTime, 'YYYY-MM-DD HH:mm:ss') }}</label>
        </el-form-item>
        <el-form-item :label="$t('developer.renark') + ':'" v-show="dataForm.status === 2 && examineFlag">
          <el-input
            v-model="dataForm.remark"
            :placeholder="this.$t('common.remark')"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            maxlength="512"
            show-word-limit
            @blur="() => dataForm.remark = dataForm.remark.trim()"></el-input>
        </el-form-item>
      </el-form>
      <div align="center" style="margin: 10px 0 10px 0">
      <span>
        <el-button type='danger' v-show="dataForm.status === 2 && examineFlag" @click="reject">{{ $t('developer.reject') }}</el-button>
        <el-button type='primary' v-show="dataForm.status === 2 && examineFlag" :loading="loading" @click="pass">{{ $t('developer.next') }}</el-button>
      </span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { formatDate } from '@/utils/formatDate'
import { formatCountry } from '@/utils/formatCountry'

export default {
  data() {
    return {
      visibleField: false,
      disable: false,
      title: '',
      id: '',
      operateType: '',
      selectedOptions: '',
      visible: false,
      clickDisabled: true,
      examineFlag: false,
      loading: false,
      dataForm: {
        address: '',
        areaCode: '',
        areaName: '',
        cityName: '',
        companyRegDate: '',
        contactName: '',
        countryCode: '',
        creTime: null,
        developerId: null,
        developerType: null,
        email: '',
        firstName: '',
        lastName: '',
        legalPerson: '',
        mobile: '',
        pidNo: '',
        pidType: '',
        postCode: '',
        provName: '',
        status: '',
        remark: '',
        updTime: 0
      }
    }
  },
  computed: {
    options() {
    }
  },
  methods: {
    statusFilter(status) {
      const statusMap = {
        0: this.$t('developer.status_list.locked'),
        1: this.$t('developer.status_list.normal'),
        2: this.$t('developer.status_list.pending_review'),
        3: this.$t('developer.status_list.rejected'),
        5: this.$t('developer.status_list.country_examine'),
        7: this.$t('developer.status_list.cert_examine'),
        8: this.$t('developer.status_list.logged_off')
      }
      return statusMap[status]
    },
    init(developer, operateType) {
      console.log(developer)
      this.examineFlag = operateType === 'examine'
      this.visible = true
      this.title = operateType === 'info' ? this.$t('developer.title_detail') : this.$t('develop.title_examine')
      this.operateType = operateType
      this.dataForm.address = developer.address
      this.dataForm.areaCode = developer.areaCode
      this.dataForm.areaName = developer.areaName
      this.dataForm.cityName = developer.cityName
      this.dataForm.companyRegDate = developer.companyRegDate
      this.dataForm.contactName = developer.contactName
      this.dataForm.countryCode = developer.countryCode
      this.dataForm.creTime = developer.creTime
      this.dataForm.developerId = developer.developerId
      this.dataForm.developerType = developer.developerType
      this.dataForm.email = developer.email
      this.dataForm.firstName = developer.firstName
      this.dataForm.lastName = developer.lastName
      this.dataForm.legalPerson = developer.legalPerson
      this.dataForm.mobile = developer.mobile
      this.dataForm.pidNo = developer.pidNo
      this.dataForm.pidType = developer.pidType
      this.dataForm.postCode = developer.postCode
      this.dataForm.provName = developer.provName
      this.dataForm.status = developer.status
      this.dataForm.updTime = developer.updTime
      this.dataForm.remark = developer.remark
      this.disable = true
    },
    cancel () {
      this.visible = false
      this.$emit('close')
    },
    formatCountry (value) {
      return formatCountry(value)
    },
    reject () {
      this.visible = false
      this.$emit('close')
    },
    pass () {
      this.clickDisabled = true
      this.cancel()
      this.$emit('refreshDataList')
    },
    changeRadio (value) {
      this.$refs['dataForm'].clearValidate()
    },
    formatDate (cellValue, fmt) {
      return formatDate(cellValue, fmt)
    }
  }
}
</script>

<style lang="scss" scoped>

.description {
  ::v-deep .el-form-item {
    margin-bottom: 0;
  }
}
</style>
